<template>
  <div class="card mb--lg">
    <Title-header title="邀请好友"></Title-header>
    <div class="invite bg-input">
      <div class="invite__link">{{ infoStore.link }}</div>
      <van-button class="btn_box" @click="copyLink(infoStore.link)"
        >复制链接</van-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { useInfoStore } from "@/store/infoman";
const infoStore = useInfoStore();
import { useCopyLink } from "@/hooks/copyLink";
// 复制按钮
const { handCopy } = useCopyLink();
const copyLink = (link: string) => {
  handCopy(link);
};
</script>

<style scoped lang="less">
.invite {
  padding: 29px 22px;
  text-align: center;
  background: linear-gradient(91deg, #f1fef7 0%, #f9f5e6 100%);
  border-radius: 10px;

  &__link {
    padding: 14px;
    font-size: 15px;
    background: #ffffff;
    box-shadow: 0px 5px 5px 1px rgba(25, 140, 101, 0.1);
    border-radius: 10px;
  }

  .btn_box {
    margin-top: 23px;
    width: 307px;
    height: 47px;
    background: linear-gradient(158deg, #31dfb0 0%, #0fc68a 100%);
    border-radius: 52px;
    box-shadow: 0px 0px 1px 2px rgba(2, 232, 155, 0.5);
  }
}
</style>
